<!-- 第一次连接 -->
<template>
	<view class="firstConnect">
		<view class="imgbox" :class="{sm:deviceType == 'GM501'}" v-if="deviceStatus <= 0">
			<image v-if="deviceType && deviceType != 'BP2A' && deviceType != 'BP2'" :src="bgImg" mode="widthFix"></image>
		</view>
		<view class="bindBox" v-if="deviceStatus > 0">
			<image v-if="getStatusImg" :src="getStatusImg" mode="widthFix"></image>
		</view>
		<view class="deviceStatus" :class="{ active: deviceStatus == 2 }">{{ deviceStatusText }}</view>
		<view class="tip" v-if="deviceStatus <= 0">
			<view v-if="deviceType == 'O2Ring'">
				<view class="title">触摸开机：</view>
				<view>佩戴后触摸设备上方圆环开机，小程序搜索到设备后将自动完成绑定</view>
			</view>
			<view v-if="deviceType == 'BP2A'">
				<view class="title">按键开机：</view>
				<view>按下设备右侧“启动/停止”键开机</view>
				<image :src="`${assetsPath}/device/BP2A1.png`" mode="widthFix"></image>
				<view class="title">按键绑定：</view>
				<view>按下设备左侧按键，小程序搜索到设备后将自动完成绑定</view>
				<image :src="`${assetsPath}/device/BP2A2.png`" mode="widthFix"></image>
			</view>
			<view v-if="deviceType == 'O2Max'">
				<view class="title">按键开机：</view>
				<view>长按设备按钮开机</view>
				<view class="title">选择设备：</view>
				<view>设备开机后，在搜索列表中选择对应的设备绑定</view>
			</view>
			<view v-if="deviceType == 'F2Pro'">
				<view class="title">触摸绑定：</view>
				<view>站立在体脂秤上开机，小程序搜索到设备后将自动完成绑定</view>
			</view>
		</view>
		<view class="footerbar" v-if="[2, 3].includes(deviceStatus)">
			<u-button type="primary" v-if="deviceStatus == 2" text="开始使用" @tap="startUse"></u-button>
			<u-button type="error" v-if="deviceStatus == 3" text="重试" @tap="retry"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		props: {
			deviceStatus: {
				type: [Number, String],
				default: 0
			},
			deviceType: {
				type: String,
				default: 'O2Ring'
			}
		},
		computed: {
			deviceStatusText() {
				let text = '搜索设备中……';
				switch (this.deviceStatus) {
					case -1:
					case 0: {
						text = '搜索设备中……';
						break;
					}
					case 1: {
						text = '正在绑定中……';
						break;
					}
					deviceType;
					case 2: {
						text = '绑定成功';
						break;
					}
					case 3: {
						text = '未发现设备';
						break;
					}
				}
				return text;
			},
			getStatusImg() {
				let img = '';
				switch (this.deviceStatus) {
					case 1: {
						img = 'bind';
						break;
					}
					case 2: {
						img = 'success';
						break;
					}
					case 3: {
						img = 'error';
						break;
					}
				}
				return img ? `${this.assetsPath}/device/${img}.jpg` : '';
			},
			bgImg() {
				if (this.deviceType == 'GM501') {
					return '/static/device/dm.png'
				} else if (this.deviceType == 'V3') {
					return `${this.assetsPath}/device/v3.jpg`
				}
				return `${this.assetsPath}/device/${this.deviceType}2.${['O2Max', 'F2Pro', 'ER'].includes(this.deviceType) ? 'jpg' : 'png'}`;
			}
		},
		methods: {
			startUse() {
				this.$emit('startUse');
			},
			retry() {
				this.$emit('retry');
			}
		}
	};
</script>

<style scoped lang="scss">
	.imgbox {
		width: 420upx;
		margin: 0 auto;
		padding: 60upx 0;

		&.sm {
			width: 300upx;
		}
	}

	.bindBox {
		width: 420upx;
		margin: 0 auto;
		padding: 60upx 0;
	}

	.deviceStatus {
		text-align: center;
		margin: 40upx auto;
		font-size: 40upx;
		font-weight: 600;

		&.active {
			color: #2ac35b;
		}
	}

	.tip {
		margin: 80upx 50upx 0;
		font-size: 30upx;

		.title {
			font-size: 34upx;
			font-weight: bold;
			margin-bottom: 30upx;
		}

		image {
			width: 50%;
			margin: 20upx auto;
			display: block;
		}
	}

	.footerbar {
		background: #fff;
		padding: 30upx 60upx;
		padding-bottom: calc(60upx + env(safe-area-inset-bottom) / 2);
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
</style>